<!-- 团购详情 -->
<template>
  <div class="box">
    <el-table class="firstTable" :data="DetailTableData" style="width: 100%" border>
      <el-table-column align="center" label="名称" prop="name" />
      <el-table-column align="center" label="介绍名称" prop="desc" />
      <el-table-column align="center" label="标签" prop="tag" />
      <el-table-column align="center" label="优惠券类型" prop="type">
        <template v-slot="scope">
          <span v-if="scope.row.type == 0">通用领券</span>
          <span v-if="scope.row.type == 1">注册赠券</span>
          <span v-if="scope.row.type == 2">兑换码</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最低消费" prop="min">
        <template v-slot="scope">
          满{{ scope.row.min }}元可用
        </template>
      </el-table-column>
      <el-table-column align="center" label="优惠面值" prop="discount">
        <template v-slot="scope">
          减免{{ scope.row.discount }}元
        </template>
      </el-table-column>
    </el-table>
    <el-table class="secondTable" :data="DetailTableData" style="width: 100%" border>
      <el-table-column align="center" label="每人限领" prop="limit" />
      <el-table-column align="center" label="当前状态" prop="status">
        <template v-slot="scope">
          <span v-if="scope.row.status == 0">正常</span>
          <span v-if="scope.row.status == 1">已过期</span>
          <span v-if="scope.row.status == 2">已下架</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品范围" prop="">
        全场通用
      </el-table-column>
      <el-table-column align="center" label="有效期" prop="status">
        领取0天有效
      </el-table-column>
      <el-table-column align="center" label="优惠兑换码" prop="" />
      <el-table-column align="center" label="发行数量" prop="total">
        <template v-slot="scope">
          <span v-if="scope.row.total == 0">不限</span>
          <span v-else>{{ scope.row.total }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-form>
      <div class="form_box">
        <el-input v-model="id" clearable style="width: 200px;" placeholder="请输入用户ID" /><el-select v-model="status" clearable placeholder="请选择使用状态" style="width: 200px;"><el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-button type="primary" icon="el-icon-search" @click="find">查找</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column align="center" label="用户优惠券ID" prop="" sortable />
      <el-table-column align="center" label="用户ID" prop="" />
      <el-table-column align="center" label="领取时间" prop="" />
      <el-table-column align="center" label="使用状态" prop="" />
      <el-table-column align="center" label="订单ID" prop="" />
      <el-table-column align="center" label="使用时间" prop="" />
    </el-table>
  </div>
</template>

<script>
  import { list, listuser } from '@/api/couponDetail'

  export default {
    data() {
      return {
        query: {
          page: 1,
          limit: 20
          // sort: add_time,
          // order: desc
        },  
        DetailTableData: [],
        tableData: [],
        id: null,
        status: null,
        stateOptions: [{
          value: 0,
          label: '正常'
        }, {
          value: 1,
          label: '已过期'
        }, {
          value: 2,
          label: '已下架'
        }],
      }
    },
    methods: {
      getList() {
        list(this.$route.query.id).then(res => {
          if (res.data.errno == 0) {
            this.DetailTableData = [res.data.data]
          }
        })
      },
      // 查找
      find() {
        this.query = {
          page: 1,
          limit: 20,
          couponId: 62,
          userId: this.id,
          status: this.status
        }
        listuser().then(res => {
          if (res.data.errno == 0) {
            // this.tableData = res.data.data.list
          }
        })
      },
    },
    created() {
      this.getList()
    }
  }
</script>

<style>
  .box {
    padding: 20px;
  }
  .firstTable {
    margin-top: 20px;
    border-bottom: 1px solid #dfe6ec;
    ;
  }
  .firstTable::before {
    width: 0 !important;
  }
  .secondTable {
    border-top: none;
  }
  .firstTable th.el-table__cell.is-leaf, .secondTable th.el-table__cell.is-leaf {
    background: #f2f6fc;
  }
  .el-table__row td {
    height: 60px !important;
  }
  .firstTable .cell, .secondTable .cell {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .form_box {
    margin-top: 20px;
    padding-bottom: 10px;
    height: 28px;
  }
</style>